<template>
  <div class="file-grid" :class="{ multi: isMulti }">
    <template v-for="file in openFiles">
      <div :key="file.path" v-if="file.type != 'directory'" class="file-item">
        <el-image
          draggable="true"
          @dblclick="singleView(file)"
          @dragstart="onDragStart($event, file)"
          @dragend="onDragEnd"
          fit="contain"
          :src="file.path"
          lazy
        />

        <div class="file-path" draggable="true" @dragstart="onDragStart($event, file)">
          {{ file.path }}
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import DragData from '../utils/DragData'

export default {
  props: {
    openFiles: {
      type: Array,
      default: () => []
    },
    isMulti: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    singleView(file) {
      this.$emit('single-view', file)
      return false
    },
    //拖拽开始
    onDragStart(e, file) {
      e.stopPropagation()
      e.dataTransfer.effectAllowed = 'move'
      let main = e.srcElement
      while (![...main.classList].includes('file-item')) {
        main = main.parentElement
      }
      const img = main.querySelector('.file-path')
      e.dataTransfer.setDragImage(img, 30, 14)
      e.dataTransfer.setData('nodeData', file)
      DragData.setData('nodeData', file)
    },

    onDragEnd(e) {
      e.stopPropagation()
      e.preventDefault()
      DragData.clear()
    }
  }
}
</script>

<style lang="less" scoped>
.file-grid {
  display: grid;
  min-height: 100%;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(400px, 1fr));

  &.multi {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-template-rows: none;

    .file-item {
      position: relative;
      height: 400px;
      padding: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #d8d8d8;
    }
  }

  .file-item {
    border-right: 1px solid #737573;
    border-bottom: 1px solid #737573;
    overflow: hidden;
    position: relative;
    height: 100%;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d8d8d8;

    .file-check {
      position: absolute;
      right: 10px;
      bottom: 10px;

      background: #ffffff;
      padding: 3px;
      z-index: 1;
    }

    .file-path {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      cursor: move;

      background: #ffffff;
      padding: 5px;
      z-index: 1;
      font-size: 12px;
      opacity: 0.7;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    :deep(.el-image) {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        height: auto;
        width: auto;
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
}
</style>
